<template>
	<view class="tabbar">
		<van-tabbar :active="actives" @change="onChange" active-color="rgb(255,64,64)">
			<van-tabbar-item v-for="(item,index) in menuList" :key="index">
				<template #icon>
					<image :class="[`icon${index}`]" :src="item.icon" mode="aspectFit" />
				</template>
				<template #icon-active>
					<image :class="[`icon${index}`]" :src="item.a_icon" mode="aspectFit" />
				</template>
				{{item.text}}
			</van-tabbar-item>
		</van-tabbar>
	</view>

</template>

<script>
	export default {
		props:{
			active:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				actives: 0,
				menuList:[
					{
						icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3c1a6907b597787f0f10d2a75f0fb959751f5356.png',
						text:'首页',
						a_icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/3bef362da8c488f2625658e569c890d3711d5a9d.png',
						url:'/pages/index/index'
					},
					{
						icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/10f493af6a24214f4c21c5954ed92a0e6d91780f.png',
						text:'消息',
						a_icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6213f49627da78441fcb13fa4d83d4e50db987e2.png',
						// url:'/pages/news/news'
					},
					{
						icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/243c95a1f4e17669962da725631f37d23bb6ba52.png',
						text:'工作台',
						a_icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/435c6120613c1b0bfaf9a8b92a43e0ead120f985.png',
						url:'/pages/work-bench/work-bench'
					},
					{
						icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2e23d76a2fb37a1d4ca3556b893c9eeb71907a80.png',
						text:'商城',
						a_icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/a26cbe798e931b927db244514a13bc78615eb3e0.png',
						url:'/pages/mall/mall'
					},
					{
						icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/5358ab7037cdfdc9ab567ffc9a39bd6b6c7761f0.png',
						text:'我的',
						a_icon:'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/6afe32a9b7e49f96dd5debaa939b9ef331cf62ad.png',
						url:'/pages/my-center/my-center'
					}
				]
			}
		},
		created() {
			this.actives = this.active
		},
		options: { styleIsolation: 'shared' },
		methods: {
			onChange(event) {
				this.actives = event.detail
				uni.reLaunch({
					url:this.menuList[event.detail].url
				})
			}
		}
	}
</script>

<style  lang="scss">
	/deep/ .van-tabbar {
		height:140rpx !important;
		align-items: flex-end;
		filter: drop-shadow(0px -7rpx 9.5rpx rgba(255,64,64,0.05));
		background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/67bf49e5052d4b6be1d25edf6750514cbea8e76c.png");
		background-color: transparent !important;
		background-size: 100% 100%;
		padding-bottom: 13rpx !important;
		background-position: 0 100%;
		&:after{
			display: none;
		}
	}
	
	.icon0{
		width: 40rpx;
		height: 35rpx;
	}
	.icon1{
		width: 40rpx;
		height: 36rpx;
	}
	.icon2{
		width: 70rpx;
		height: 70rpx;
		filter: drop-shadow(0px 9rpx 17.04rpx rgba(255,64,64,0.33));
	}
	.icon3{
		width: 40rpx;
		  height: 36rpx;
	}
	.icon4{
		width: 40rpx;
	    height: 36rpx;
	}
	
</style>
